<template>
  <div class="example-container">
    <h3>LoginForm 使用示例</h3>
    
    <!-- 基本使用 -->
    <div class="example-section">
      <h4>基本使用（页面中）</h4>
      <LoginForm 
        @success="handleSuccess"
        @error="handleError"
      />
    </div>
    
    <!-- 弹框中使用 -->
    <div class="example-section">
      <h4>弹框中使用</h4>
      <a-button type="primary" @click="showLoginModal">
        打开登录弹框
      </a-button>
      
      <a-modal
        v-model:open="modalVisible"
        title="用户登录"
        :footer="null"
        width="400px"
        @cancel="handleModalCancel"
      >
        <LoginForm 
          :block="false"
          @success="handleModalSuccess"
          @error="handleModalError"
        />
      </a-modal>
    </div>
    
    <!-- 小尺寸按钮 -->
    <div class="example-section">
      <h4>小尺寸按钮</h4>
      <LoginForm 
        size="small"
        :block="false"
        @success="handleSuccess"
        @error="handleError"
      />
    </div>
    
    <!-- 中等尺寸按钮 -->
    <div class="example-section">
      <h4>中等尺寸按钮</h4>
      <LoginForm 
        size="middle"
        :block="false"
        @success="handleSuccess"
        @error="handleError"
      />
    </div>
    
    <!-- 使用ref调用组件方法 -->
    <div class="example-section">
      <h4>使用ref调用组件方法</h4>
      <div style="margin-bottom: 16px;">
        <a-button @click="setToken">设置Token</a-button>
        <a-button @click="getToken" style="margin-left: 8px;">获取Token</a-button>
        <a-button @click="resetForm" style="margin-left: 8px;">重置表单</a-button>
      </div>
      <LoginForm 
        ref="loginFormRef"
        :block="false"
        @success="handleSuccess"
        @error="handleError"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { message } from 'ant-design-vue';
import LoginForm from './LoginForm.vue';

// 弹框显示状态
const modalVisible = ref(false);

// 登录表单引用
const loginFormRef = ref<InstanceType<typeof LoginForm>>();

// 处理成功事件
const handleSuccess = () => {
  console.log('登录成功');
  message.success('登录成功');
};

// 处理错误事件
const handleError = (error: string) => {
  console.error('登录失败:', error);
  message.error('登录失败: ' + error);
};

// 显示登录弹框
const showLoginModal = () => {
  modalVisible.value = true;
};

// 处理弹框取消
const handleModalCancel = () => {
  modalVisible.value = false;
};

// 处理弹框登录成功
const handleModalSuccess = () => {
  message.success('登录成功');
  modalVisible.value = false;
};

// 处理弹框登录失败
const handleModalError = (error: string) => {
  message.error('登录失败: ' + error);
};

// 设置Token
const setToken = () => {
  if (loginFormRef.value) {
    loginFormRef.value.setTsToken('test-token-123');
    message.info('已设置Token');
  }
};

// 获取Token
const getToken = () => {
  if (loginFormRef.value) {
    const token = loginFormRef.value.getTsToken();
    message.info('当前Token: ' + token);
  }
};

// 重置表单
const resetForm = () => {
  if (loginFormRef.value) {
    loginFormRef.value.resetForm();
    message.info('表单已重置');
  }
};
</script>

<style scoped>
.example-container {
  padding: 24px;
}

.example-section {
  margin-bottom: 32px;
  padding: 20px;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  background: #fafafa;
}

.example-section h4 {
  margin: 0 0 16px 0;
  color: #1890ff;
  font-size: 16px;
}
</style>
